<template>
	<view>
		<view class="detail_box">
			<scroll-view :scroll-into-view="intoView" scroll-with-animation="true" scroll-y="true" class="detail_scroll">
				<swiper :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" class="swiper_box">
					<swiper-item v-for="(item,index) in detail.imglist" :key="index">
						<image mode="widthFix" class="swiper_img" :src="item"></image>
					</swiper-item>
				</swiper>
				<view class="detail_top">
					<view class="flex_box item_center flex_between view_t">
						<view class="font6 view_name text_hidden">{{detail.title}}</view>
						<!-- <view class="flex_shrink view_label">{{detail.c_name}}</view> -->
					</view>
					<view class="flex_box item_center view_option flex_wrap">
						<view class="view_option_item">{{detail.c_name}}</view>
						<view class="view_option_item" :class="'view_option_item'+index" v-for="(item,index) in detail.flaglist" :key="index">{{item.name}}</view>
						<template v-for="(val, index) in detail.cardtype">
							<view class="cardtype flex_box" :class="'cardtype' + val">
								<image src="/static/mine/icon1.png" class="typetagimg"></image>
								<view>{{ val == 1? '黄金版' : '豪华版' }}</view>
							</view>
						</template>
					</view>
					<view class="flex_box flex_row_between mt20">
						<view class="flex_box item_center view_time flex_col_top">
							<view class="flex_image flex_box">
								<image class="flex_shrink view_time_img" src="/static/time.png"></image>
								<text>开放时间：</text>
							</view>
							<view class="view_time_text mt20">{{detail.description}}</view>
							<view class="flex_box">
								<view class="yingye_text mt10"><text>正常营业</text></view>
							</view>
						</view>
						<view class="flex_box item_center view_time flex_col_top">
							<view class="flex_image flex_box">
								<image class="flex_shrink view_time_img" src="/static/location.png"></image>
								<text>景点地址：</text>
							</view>
							<view class="view_time_text mt20 text_hidden">{{detail.province}}{{detail.city}}{{detail.area}}{{detail.details}}</view>
							<view class="flex_box">
								<view class="mt10 flex_box flex_row_between mapbox">
									<view class="flex_box">
										<u-image src="/static/dhicon.png" width="33rpx" height="33rpx"/>
										<text>导航</text>
									</view>
									<view class="gapline"></view>
									<view class="flex_box">
										<u-image src="/static/dticon.png" width="33rpx" height="33rpx"/>
										<text>地图</text>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="flex_box item_center view_location">
							<image class="flex_shrink view_location_img" src="/static/location.png"></image>
							<view class="view_location_text text_hidden">{{detail.province}}{{detail.city}}{{detail.area}}{{detail.details}}</view>
							<view class="flex_shrink view_location_distance"> | {{detail.distance}}</view>
							<view class="flex_shrink flex_box item_center flex_end view_location_btn">
								<view>导航</view>
								<image class="view_location_right" src="../../static/right.png"></image>
							</view>
						</view> -->
					</view>
				</view>
				<view class="detail_main">
					<view class="flex_box item_center flex_row_between view_title">
						<view @click="selectDetail" data-idx="1" data-status="detail1" class="view_title_item" :class="{'view_title_item1': titleIdx==1}">景区介绍</view>
						<view @click="selectDetail" data-idx="2" data-status="detail2" class="view_title_item" :class="{'view_title_item1': titleIdx==2}">交通出行</view>
						<view @click="selectDetail" data-idx="3" data-status="detail3" class="view_title_item" :class="{'view_title_item1': titleIdx==3}">注意事项</view>
					</view>
					<view id="detail1" class="view_detail">
						<view class="view_detail_title">景区简介</view>
						<view class="view_detail_content">
							<jyf-parser lazy-load='true' :html="detail.content"></jyf-parser>
						</view>
					</view>
					<view id="detail2" class="view_detail">
						<view class="view_detail_title">交通出行</view>
						<view class="view_detail_content">
							<jyf-parser lazy-load='true' :html="detail.traffic"></jyf-parser>
						</view>
					</view>
					<view id="detail3" class="view_detail">
						<view class="view_detail_title">注意事项</view>
						<view class="view_detail_content">
							<jyf-parser lazy-load='true' :html="detail.note"></jyf-parser>
						</view>
					</view>
					<view id="detail3" class="view_detail">
						<view class="view_detail_title">门票说明</view>
						<view class="view_detail_content">
							<jyf-parser lazy-load='true' :html="detail.ticket"></jyf-parser>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="flex_box item_center flex_row_between detail_footer">
				<view @click="goHome" class="detail_footer_item">
					<image class="detail_footer_img1" src="/static/tab1_active.png"></image>
					<view>返回首页</view>
				</view>
				<view @click="callMe" class="detail_footer_item">
					<image class="detail_footer_img2" src="/static/mine4.png"></image>
					<view>客服热线</view>
				</view>
				<view v-if="hour<9||hour>24" @click="showTip" class="detail_footer_btn">立即预约</view> <!-- 17 -->
				<view v-else-if="!visible1" @click="appoint" class="detail_footer_btn">立即预约</view>
				<picker v-else :start="sTime" :end="eTime" mode="date" @change="getactivityTime">
					<view class="detail_footer_btn">立即预约</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import {getT} from "@/common/js/public.js"
	import { myCheck, userInfo, JqDetail, JqOrder } from "@/common/http.api";
	export default { 
		components:{
			wPicker,
			jyfParser
		},
		data() {
			return {
				autoplay: !0,
				interval: 5000,
				duration: 500,
				circular: !0,
				titleIdx: 1,
				intoView: "",
				lng: "",
				lat: "",
				id: "2",
				detail: "",
				visible1: !1,
				activitytime: "",
				activityTime: "",
				user: "",
				sTime: "",
				eTime: "",
				hour: 0,
			}
		},
		onLoad(options) {
			let that = this
			if(options.id) that.id = options.id
			uni.showLoading({
				title: "加载中",
				mask: !0
			}),that.getLocation()
		},
		onShow() {
			let that = this,loginStatus = uni.getStorageSync("loginStatus")
			that.getUser()
			let date = new Date();
			that.hour = date.getHours();
			let nTime = date.getTime()
			that.sTime = getT(nTime+48*3600000)
			console.log(that.sTime);
			that.eTime = getT(nTime+168*3600000)
			myCheck().then(res => {
				if(res.data==0){
					
				}else{
					if(loginStatus==2) that.visible1 = !0
				}
			}).catch(err => {
				console.log(err)
			})
		},
		methods: {
			// 获取用户信息
			getUser(){
				let that = this
				userInfo().then(res => {
					console.log(res)
					that.user = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取位置
			getLocation: function() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(t) {
						console.log(t)
						that.lng = t.longitude, that.lat = t.latitude, that.getDetail()
					},
					fail() {
						that.Toast('获取位置信息失败，请开启GPS定位')
						uni.hideLoading()
					}
				});
			},
			// 获取详情
			getDetail(){
				let that = this
				JqDetail({params: {lng: that.lng,lat: that.lat,id: that.id}}).then(res => {
					console.log(res)
					uni.hideLoading(),that.detail = res.data,that.detail.cardtype = that.detail.cardtype.split(',')
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
				})
			},
			// 导航栏滚动
			selectDetail(e){
				let that = this,status = e.currentTarget.dataset.status,idx = e.currentTarget.dataset.idx
				that.intoView = status,that.titleIdx = idx
			},
			// 导航
			seeLoaction(e){
				let that = this
				console.log(that.detail.lat)
				uni.openLocation({
					latitude: that.detail.lat,
					longitude: that.detail.lng,
					name: that.detail.title,
					address: that.detail.province+that.detail.city+that.detail.area+that.detail.details
				})
			},
			// 返回首页
			goHome(e){
				uni.switchTab({
					url: "/pages/home/index/index"
				})
			},
			// 客服热线
			callMe(){
				let that = this
				uni.makePhoneCall({
					phoneNumber: that.detail.mobile+""
				})
			},
			// 获取预约时间
			getactivityTime(e){
				let that = this
				console.log(e)
				let val = e.detail.value.split("-")
				that.activityTime = e.detail.value,that.activitytime = new Date(val[0],val[1]-1,val[2],"23","59","59").getTime()/1000
				JqOrder({activitytime: that.activitytime,scenic_id: that.id,username: that.user.username}).then(res => {
					console.log(res)
					uni.showModal({
						title: "预约成功",
						content: "订单正在审核中",
						cancelText: "取消",
						cancelColor: "#000000",
						confirmColor: "#008F70",
						confirmText: "去看看",
						success(rel) {
							if(rel.confirm){
								uni.switchTab({
									url: "/pages/travel/index/index"
								})
							}
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			onCancel(){
				
			},
			// 提示
			showTip(e){
				let that = this;
				uni.showModal({
					title: "提示",
					content: "开放预约时间为09:00~18:00",
					showCancel: !1,
					confirmText: "知道了"
				});
			},
			// 预约
			appoint(){
				let that = this,loginStatus = uni.getStorageSync("loginStatus")
				if(!loginStatus||loginStatus==1){
					uni.$u.toast("请先登录"),setTimeout(()=>{
						uni.switchTab({
							url: "/pages/mine/index/index"
						})
					},1200)
					return
				}
				myCheck().then(res => {
					if(res.data==0){
						uni.showModal({
							title: "会员购买",
							content: "您还不是我们的会员",
							cancelText: "在线购买",
							cancelColor: "#000000",
							confirmColor: "#008F70",
							confirmText: "在线激活",
							success(rel) {
								if(rel.confirm){
									uni.navigateTo({
										url: "/pages/mine/card/card"
									})
								}else{
									uni.navigateTo({
										url: "pages/mine/card/buy"
									})
								}
							}
						})
					}else{
						that.visible1 = !0
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	@import url("@/common/css/listDetail.css");
</style>
